@import '@material/menu-surface/mixins.import';
@import '@material/list/mixins.import';
@import '../../material/core/style/variables';
@import '../../material/core/style/vendor-prefixes';
@import '../../cdk/a11y/a11y';

$mat-select-arrow-size: 5px !default;
$mat-select-arrow-margin: 4px !default;
$mat-select-panel-max-height: 256px !default;
$mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-arrow-margin);
$leading-width: 12px !default;
$scale: 0.75 !default;

// We base the select panel styling on top of MDC's menu styles and we
// implement the trigger ourselves since MDC doesn't provide an equivalent.

@include mdc-menu-surface-core-styles($query: structure);

.mat-mdc-select {
  display: inline-block;
  width: 100%;
  outline: none;
}

.mat-mdc-select-trigger {
  display: inline-table;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;

  .mat-mdc-select-disabled & {
    @include user-select(none);
    cursor: default;
  }
}

.mat-mdc-select-value {
  display: table-cell;
  max-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mat-mdc-select-value-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mat-mdc-select-arrow-wrapper {
  display: table-cell;
  vertical-align: middle;

  // When used in a box appearance form-field the arrow should be shifted up 40%.
  .mat-form-field-appearance-fill & {
    transform: translateY(-40%);
  }
}

.mat-mdc-select-arrow {
  width: 0;
  height: 0;
  border-left: $mat-select-arrow-size solid transparent;
  border-right: $mat-select-arrow-size solid transparent;
  border-top: $mat-select-arrow-size solid;
  margin: 0 $mat-select-arrow-margin;
}

// Note that the `.mdc-menu-surface` is here in order to bump up the specificity
// and avoid interference with `mat-menu` which uses the same mixins from MDC.
.mdc-menu-surface.mat-mdc-select-panel {
  width: 100%; // Ensures that the panel matches the overlay width.
  max-height: $mat-select-panel-max-height;
  position: static; // MDC uses `absolute` by default which will throw off our positioning.
  outline: 0;

  // Note that we include this private mixin, because the public
  // one adds a bunch of styles that we aren't using for the menu.
  @include mdc-list-base_($query: structure);
  @include cdk-high-contrast(active, off) {
    outline: solid 1px;
  }

  .cdk-overlay-pane:not(.mat-mdc-select-panel-above) & {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transform-origin: top center;
  }

  .mat-mdc-select-panel-above & {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform-origin: bottom center;
  }
}

.mat-mdc-select-placeholder {
  // Delay the transition until the label has animated about a third of the way through, in
  // order to prevent the placeholder from overlapping for a split second.
  transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
      $swift-ease-out-timing-function;

  ._mat-animation-noopable & {
    transition: none;
  }

  .mat-form-field-hide-placeholder & {
    color: transparent;

    // Overwrite browser specific CSS properties that can overwrite the `color` property.
    // Some developers seem to use this approach to easily overwrite the placeholder / label color.
    -webkit-text-fill-color: transparent;

    // Remove the transition to prevent the placeholder
    // from overlapping when the label comes back down.
    transition: none;
    // Prevents the '...' from showing on the parent element.
    display: block;
  }
}

// Our MDC form field implementation is based on the MDC text field which doesn't include styles
// for select. The select specific styles are not present as they don't use their text field as a
// container. Below are the styles to account for the select arrow icon at the end.
.mat-mdc-form-field-type-mat-select {
  &.mat-form-field-appearance-fill {
    .mdc-floating-label {
      max-width: calc(100% - #{$mat-select-placeholder-arrow-space});
    }

    .mdc-floating-label--float-above {
      max-width: calc(100% / #{$scale} - #{$mat-select-placeholder-arrow-space / $scale});
    }
  }
  &.mat-form-field-appearance-outline {
    .mdc-notched-outline__notch {
      max-width: calc(100% - #{2 * ($mat-select-placeholder-arrow-space + $leading-width)});
    }

    .mdc-text-field--label-floating .mdc-notched-outline__notch {
      max-width: calc(100% - #{$leading-width * 2});
    }
  }
}
